<!DOCTYPE html>
<html>
<head>
	<title>WebSocket Image Upload</title>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<link rel="stylesheet" href="../static/css/up_img.css"/>
	<script>
		var progressBar = document.querySelector('.progress');
		var percentComplete = 0;
		function updateProgress(num) {
			percentComplete = (num/207)*100
			$(".progress").width(String(percentComplete)+"%");
			console.log(num)
			$("#pre").text(String(percentComplete.toFixed(2))+"%")

			if(num==='207'){
				alert("生成完成");
				$("#video_play").show();
                $("button").show();
                $(".progress").width("100%");

				$("#pre").text("100%");

				$("#video_play").attr("src","http://127.0.0.1/video/"+ localStorage.getItem("user") +".mp4/");
			}
		}
		// 创建WebSocket连接
		var ws = new WebSocket("ws://localhost:80/ws/image/");
		// WebSocket连接建立成功
		ws.onopen = function() {
			console.log("WebSocket连接已建立。");
		};
		// 接收到WebSocket服务器发送的消息
		ws.addEventListener('message', function (event) {
			updateProgress(event.data);
		});
		
		// 处理文件选择事件
		function handleFileSelect(evt) {
			// 获取选择的文件
			var files = evt.target.files;
			var file = files[0];
			// 创建FileReader对象
			var reader = new FileReader();
			// 读取文件完成后触发的事件
			reader.onload = function(event) {
			// 获取文件内容
			var data = event.target.result;
        	let imgStr = reader.result.replace(/^data:image\/\w+;base64,/, "");
          // 构造一个包含JSON数据的对象

        	var JsonData = {'imgStr': imgStr, 'user': localStorage.getItem("user") };

        	// 将JSON对象转换为字符串，并发送到服务器端
        	ws.send(JSON.stringify(JsonData));
				// 创建img元素
			var img = document.createElement("img");
			// 设置img元素的src属性为文件内容
			$('img').attr('src', data);
			$('img').show();
			
			// 将img元素添加到body中
		};
			// 读取文件
			reader.readAsDataURL(file);
		}
		// 页面加载完成后执行的函数
		$(document).ready(function() {
			// 绑定文件选择事件
			$("#file").change(handleFileSelect);
		});
	</script>
</head>
<body>
		<div class="main_box">
			<video width="255px" height="255px" controls>
				<source src="http://127.0.0.1/video/myself.mp4/"  type="video/mp4">
				您的浏览器不支持 HTML5 video 标签。
			</video>
			<video id="video_play" src=""  controls autoplay>
			</video>
			<div class="thumbnail_img">
				<img src="../static/img/bg.jpg" id="thumbnail" style="max-width: 100%; max-height: 100%;" width="auto" height="auto">
			</div>
			<div class="box">
				<input class="input_box" type="file" id="file" name="upload" accept="image/*"  />
				<br>
				<button class="input_box btn" onclick="all_play()">同时播放</button>
			</div>
			
			<div class="progress-bar">
				<div class="progress"></div>
				<div id="pre" style="color: aliceblue;"></div>
			  </div>
		</div>
		
</body>
<script src="../static/js/upimg.js"> </script>

</html>
